<!DOCTYPE html>
<html class="x-admin-sm">
    
    <head>
        <meta charset="UTF-8">
        <title>回收站</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="../css/font.css">
        <link rel="stylesheet" href="../css/xadmin.css">
        <link rel="stylesheet" href="../lib/layui/css/dtree.css">
        <link rel="stylesheet" href="../lib/layui/font/dtreefont.css">
        <script src="../lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="../js/xadmin.js"></script>
        <script src="../lib/axios.min.js"></script>
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style>
            .layui-layer-page .layui-layer-content {
                position: relative;
                overflow: inherit;
            }
        </style>
    </head>
    
    <body>
        <div class="x-nav">
            <form class="layui-form" style="float:left;margin-left:24%;margin-top: 1px;">
                <div class="layui-input-inline layui-form-item" id="fields" style="width: 100px;"></div>
                <div class="layui-input-inline layui-form-item">
                    <input class="layui-input search-data-input" placeholder="请输入关键词" name="word" style="width: 350px;"></input>
                </div>
                <div class="layui-input-inline layui-form-item">
                    <button class="layui-btn layui-btn-small" id="clickme" title="检索" lay-filter="find" lay-submit="" style="line-height:1.4em;margin-left:7px;">
                        <i class="layui-icon layui-icon-search" style="line-height:30px"></i>
                    </button>
                </div>
            </form>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:5px;float:right" onclick="location.reload()" title="刷新">
              <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md2">
                    <ul id="demoTree1" class="dtree" data-id="0"></ul>
                </div>
                <div class="layui-col-md10">
                    <div class="layui-card-body layui-table-body layui-table-main">
                        <table id="demo" lay-filter="test"></table>
                    </div>
                </div>
            </div>
        </div>
        <script id="demo" type="text/html">
            <select name="kid" id="kid" lay-filter="brickType">
                {{#  layui.each(kind, function(index, item){ }}
                <option value="{{item.kid}}">{{item.kname}}</option>
                {{#  }); }}
                {{#  if(kind.length === 0){ }}
                无数据
                {{#  } }}
            </select>
        </script>
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-danger" lay-event="delAll"><i class="layui-icon"></i>批量删除</button>
                <button class="layui-btn" onclick="add()"><i class="layui-icon"></i>新增条目</button>
                <button class="layui-btn layui-btn-normal" lay-event="upAll"><i class='layui-icon'>&#xe64c;</i>批量挂接</button>
            </div>
        </script>
        <script type="text/html" id="pic">
            <a lay-event="upl" title="原文" href="javascript:;">
                <i class="layui-icon">&#xe64a;</i></a>
                {{#  if (d.film === 'nul'){ }}
                0
                {{# }else if (d.film.length === undefined){ }}
                1
                {{# }else{ }}
                {{d.film.length}}
                {{# } }}
        </script>
        <script type="text/html" id="bar">
            <a lay-event="edi" title="编辑" href="javascript:;">
                <i class="layui-icon">&#xe642;</i></a>
            <a lay-event="del" title="删除" href="javascript:;">
                <i class="layui-icon">&#xe640;</i></a>
        </script>

        <script type="text/html" id="f_demo">
            <select class="layui-input" name="field">
                <option value="0">题名</option>
                <option value="1">档号</option>
            </select>
        </script>
        <script type="text/javascript">
            var kind= [];
            var kin = [];
            var ki;
            var dat = [];
            var tree = [];
            var fies = [];
            
            layui.use("laytpl", function(){
                var laytpl = layui.laytpl
                ,getTpl = f_demo.innerHTML
                ,fields = document.getElementById('fields');
                laytpl(getTpl).render(fies, function(html){
                    fields.innerHTML = html;
                });
            })
            function add(){
                localStorage.setItem("k", ki);
                xadmin.open('新增','./add.html',780,500);
            }
            axios.get('/api/get_q').then(res=>{
                tree = res.data;
                layui.config({
                    base: '../lib/layui/layui-expand/'
                }).extend({
                    dtree: 'dtree'
                }).use(['element', 'dtree', 'table'], function(){
                    var dtree = layui.dtree
                    ,table = layui.table;
                    //渲染
                    dtree.render({
                        elem: "#demoTree1"  //绑定元素
                        ,data: tree  //异步接口
                        ,dataFormat: "list"
                        ,record: true
                        ,skin: "laySimple"
                        ,line: true
                    });
                    for (var i in tree){
                        if (tree[i].th == -2){
                            ki = Number(tree[i].id);
                            break;
                        }
                    }
                    axios.post('/api/get_d_k', {"kid": ki}).then(res=>{
                        dat = res.data;
                        var k = {'kid': ki};
                        axios.post('/api/get_kl', k).then(res=>{
                            var h = res.data;
                            h.unshift({field:'film', width:61, title:'原文', fixed: "left", toolbar:"#pic"})
                            h.unshift({type:'checkbox', fixed: "left"});
                            h.push({field: '', fixed: 'right', title: '操作', toolbar: "#bar"})
                            kin = [h];
                            table.render({
                                elem: '#demo'
                                ,toolbar: '#toolbarDemo'
                                ,page: true
                                ,limits: [10, 20, 50, 100]
                                ,cols: kin
                                ,data: dat
                            });
                        });
                    });
                    //单击节点 监听事件
                    dtree.on("node('demoTree1')" ,function(obj){
                        if(obj.param.recordData.th == -2){
                            ki = Number(obj.param.nodeId);
                            axios.post("/api/get_kl", {kid: ki}).then(res=>{
                                res.data.unshift({field:'film', width:61, title:'原文', fixed: "left", toolbar:"#pic"});
                                res.data.unshift({type:'checkbox', fixed: "left"});
                                res.data.push({field: '', fixed: 'right', title: '操作', toolbar: "#bar"})
                                kin = [res.data];
                                axios.post("/api/get_d_k", {kid: ki}).then(res=>{
                                    dat = res.data;
                                    table.render({
                                        elem: '#demo'
                                        ,cols: kin
                                        ,toolbar: '#toolbarDemo'
                                        ,page: true
                                        ,limits: [10, 20, 50, 100]
                                        ,data: dat
                                    })
                                })
                            })
                        }
                    });
                });
            });
            
            layui.use(['form', 'table'], function(){
                var form = layui.form
                ,table = layui.table;
                table.render({
                    elem: '#demo'
                    ,cols: []
                    ,toolbar: '#toolbarDemo'
                    ,height: 540
                    ,page: true
                    ,limits: [10, 20, 50, 100]
                    ,done: function (obj) {
                        layer.closeAll();
                        form.on('checkbox(checkboxIsSelected)', function(data){
                            var _index = $(data.elem).attr('table-index')||0;
                            if(data.elem.checked){
                            obj.data[_index].is_qualified = data.value;
                            }else{
                            obj.data[_index].is_qualified = 2;
                            }
                        });   
                    }
                    
                });
             
                form.on('submit(find)', function(data) {
                    var word = data.field.word;
                    if(word !== ""){
                        var w = {"kid": ki, "word": word};
                        axios.post('/api/find', w).then(res=>{
                            dat = res.data;
                            var k = {'kid': ki};
                            axios.post('/api/get_kl', k).then(res=>{
                                res.data.unshift({type:'checkbox', fixed: "left"});
                                res.data.push({field: '',fixed: 'right',  title: '操作', toolbar: "#bar"})
                                kin = [res.data];
                              
                                table.reload('demo', {
                                    cols: kin
                                    ,data: dat
                                });
                            });
                        });
                    }else{
                        var k = {'kid': ki};
                        axios.post('/api/get_d_k', k).then(res=>{
                            dat = res.data;
                            
                            axios.post('/api/get_kl', k).then(res=>{
                                res.data.unshift({type:'checkbox', fixed: "left"});
                                res.data.push({field: '',fixed: 'right',  title: '操作', toolbar: "#bar"})
                                kin = [res.data];
                                table.reload('demo', {
                                    cols: kin
                                    ,data: dat
                                });
                            });
                
                        });
                    }
                    return false;
                });

                table.on('toolbar(test)', function(obj){
                    var checkStatus = table.checkStatus(obj.config.id);
                    switch (obj.event) {
                        case 'delAll':
                            var all = checkStatus.data;
                            var ids = [];
                            for (var i in all) {
                                ids.push(all[i].did);
                            }
                            if(ids.length>0){
                                layer.confirm('确认要删除选中项吗？',function(index){
                                    for (var j in ids) {
                                        axios.post('/api/del_d', {'did': ids[j]}).then(res=>{
                                            console.log(res.data)
                                        })
                                    }
                                    layer.msg('删除成功', {icon: 1,time:1000});
                                    $(".layui-form-checked").not('.header').parents('tr').remove();
                                });
                            }else{
                                layer.msg("请选择要删除的条目！")
                            }
                        break;
                        case 'upAll':
                            var all = checkStatus.data;
                            var ids = [];
                            for (var i in all) {
                                ids.push({id:all[i].did,dh:all[i].DH});
                            }
                            if(ids.length>0){
                                localStorage.setItem("list", JSON.stringify(ids));
                                xadmin.open('挂接','./uploads.html',780,500);
                            }else{
                                layer.msg("请选择要挂接的条目！")
                            }
                            

                        break;
                    }
                });

                table.on('tool(test)', function(obj){
                    var data = obj.data;
                    switch (obj.event) {
                    case 'upl':
                        if (data.film !== "nul"){
                            xadmin.open('影像','./film.html',900,700);
                        }
                        break;
                    case 'edi':
                        localStorage.setItem("k", ki);
                        localStorage.setItem("d", JSON.stringify(data));
                        xadmin.open('编辑','./edit.html',780,500);
                        break;
                    case 'del':
                        layer.confirm('确认要删除行吗？',function(){
                            axios.post('/api/del_d', {'did': data.did}).then(res=>{
                                layer.msg('删除成功', {icon: 1,time:1000});
                                obj.del();
                            });
                        });
                        break;
                    };
                })
            });
        </script>
    </body>   
    
</html>
